
'use strict';
/**
 * 场景推荐（色盘页专用）
 * - 监听色值变化（输入框/吸管/色块点击），在 #scene-reco 区域即时给出：
 *   1) 颜色中文名（含明暗/饱和度特征）
 *   2) 情绪标签（与右侧图例一致）
 *   3) 精准推荐场景（3~5 个，保证一目了然）
 * - 纯原生，无依赖；只在包含“匹配灵敏度 / ΔE / 吸管取色 / 已选颜色”等关键字的页面生效
 */
(function(){
  const ACTIVE = /匹配灵敏度|ΔE|吸管取色|已选颜色/.test((document.body.innerText||''));
  if(!ACTIVE) return;

  // ---------- 工具函数 ----------
  const $ = (sel, root)=> (root||document).querySelector(sel);
  const $all = (sel, root)=> Array.from((root||document).querySelectorAll(sel));
  const isHex6 = v => /^#[0-9a-fA-F]{6}$/.test((v||'').trim());
  const clamp = (v, a, b)=> Math.min(Math.max(v, a), b);

  function getHex(){
    // 优先取页面上的十六进制输入框
    const inp = $all('input[type="text"],input.hex').find(i=>isHex6(i.value));
    if(inp) return inp.value.trim().toUpperCase();
    // 兜底：从页面文本中提取
    const all = document.body.innerText||'';
    let m = all.match(/已选颜色[^#]*(#[0-9a-fA-F]{6})/); if(m) return m[1].toUpperCase();
    m = all.match(/#[0-9a-fA-F]{6}/); if(m) return m[0].toUpperCase();
    return '#27E6B8';
  }

  function hexToRgb(hex){
    const m = hex.replace('#','').match(/.{2}/g)||['00','00','00'];
    const [r,g,b] = m.map(x=>parseInt(x,16));
    return {r,g,b};
  }
  function rgbToHsl(r,g,b){
    r/=255; g/=255; b/=255;
    const max=Math.max(r,g,b), min=Math.min(r,g,b);
    let h, s, l=(max+min)/2;
    if(max===min){ h=s=0; } else {
      const d=max-min;
      s = l>0.5 ? d/(2-max-min) : d/(max+min);
      switch(max){
        case r: h=(g-b)/d + (g<b?6:0); break;
        case g: h=(b-r)/d + 2; break;
        default: h=(r-g)/d + 4;
      }
      h*=60;
    }
    return {h: (h||0), s: s*100, l: l*100};
  }
  function hexToHsl(hex){
    const {r,g,b} = hexToRgb(hex);
    const {h,s,l} = rgbToHsl(r,g,b);
    return {h: (h+360)%360, s, l};
  }
  function hexToRgba(hex, alpha=1){
    const {r,g,b} = hexToRgb(hex);
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
  }

  // ---------- 颜色命名（中文） ----------
  function nameByHue(h){
    // 粗略色相到基础中文名
    if((h>=0 && h<12) || h>=348) return '绯红';
    if(h<20)  return '朱红';
    if(h<40)  return '琥珀橙';
    if(h<55)  return '金盏黄';
    if(h<75)  return '青柠绿';
    if(h<95)  return '草绿';
    if(h<135) return '祖母绿';
    if(h<165) return '薄荷青';
    if(h<190) return '湖水青';
    if(h<210) return '天蓝';
    if(h<230) return '钴蓝';
    if(h<250) return '靛蓝';
    if(h<270) return '蓝紫';
    if(h<290) return '葡萄紫';
    if(h<320) return '玫红';
    if(h<345) return '桃粉';
    return '绯红';
  }
  function tonePrefix(s,l){
    const S=s, L=l;
    if(S<=10){
      if(L>=92) return '近白·中性';
      if(L<=10) return '近黑·中性';
      if(L<35) return '深灰·极简';
      if(L>75) return '浅灰·极简';
      return '中灰·极简';
    }
    // 彩色
    if(S<35 && L>78) return '粉彩·柔和';
    if(S>80 && L>60) return '霓虹·高能';
    if(L<28) return '深色';
    if(L>80) return '浅色';
    if(S<25) return '低饱和';
    if(S>75) return '高饱和';
    return '中性饱和';
  }
  function cnColorName(h,s,l){
    // 棕色识别（橙黄低亮）
    const isBrown = (h>=20 && h<=55) && (l<=55) && (s<=65);
    if(isBrown){
      const deep = l<35;
      return deep ? '可可棕' : '焦糖棕';
    }
    if(s<=10){
      if(l>=92) return '近白（中性灰）';
      if(l<=10) return '近黑（中性灰）';
      if(l<35) return '深灰';
      if(l>75) return '浅灰';
      return '中灰';
    }
    // 根据明暗附加前缀
    let base = nameByHue(h);
    if(l<28) base = '深' + base;
    else if(l>80) base = '浅' + base;
    // 低饱和/粉彩/霓虹
    if(s<25 && l<70) base += '（低饱和）';
    else if(s<40 && l>78) base = '粉彩' + base.replace(/^浅?/, '');
    else if(s>85 && l>60) base = '霓虹' + base;
    return base;
  }

  // ---------- 情绪标签 + 推荐场景 ----------
  function moodTag(h,s,l){
    if(s<=10){
      return (l<20) ? '深邃 · 神秘' : '极简 · 明快';
    }
    // 冷暖倾向
    const cold = (h>=150 && h<=250);
    const warm = (h<=70 || h>=330);
    if(cold){
      // 蓝青：若偏亮/偏灰更宁静
      if(l>70 && s<55) return '治愈 · 宁静';
      return '科技 · 未来';
    }
    if(h>=80 && h<150){
      return '自然 · 轻快';
    }
    if(h>=260 && h<330){
      // 紫粉：亮且柔 = 浪漫；深 = 神秘
      if(l>70) return '甜美 · 浪漫';
      if(l<30) return '深邃 · 神秘';
      return '治愈 · 宁静';
    }
    // 红橙黄
    if(h<25 || h>=330) return '热烈 · 冲突';
    if(h<60) return '温暖 · 活力';
    return '自然 · 轻快';
  }

  const SCENE_LIBRARY = {
    '科技 · 未来': [
      '科技/数码产品演示', '企业/金融科技宣传', '数据/AI/区块链科普',
      'UI/仪表盘/产品片头', '电子/未来感配乐封面'
    ],
    '自然 · 轻快': [
      '旅行/户外运动', '绿色环保/园艺/三农', '健康生活方式',
      '小清新/治愈系 vlog', '春夏主题活动'
    ],
    '温暖 · 活力': [
      '美食/咖啡/市集', '亲子/家庭/校园',
      '电商上新/节日促销', '晨间/阳光感 vlog', '生活方式短片'
    ],
    '热烈 · 冲突': [
      '体育竞技/极限运动', '汽车机车/工业硬核', '电竞宣传/赛博动作',
      '快剪赛道/节奏冲击', '预告片/片头炸点'
    ],
    '甜美 · 浪漫': [
      '婚礼/求婚/纪念日', '甜品烘焙/美妆护肤', '花卉/少女感 vlog',
      '约会氛围/温柔人像', '春季/樱花主题'
    ],
    '治愈 · 宁静': [
      '冥想/睡眠/瑜伽', '书房/学习/专注背景', '自然风景延时',
      '雨天/慢生活 vlog', '疗愈场所/康养空间'
    ],
    '极简 · 明快': [
      '极简品牌/留白海报', '产品开箱/信息图', '企业文化/年度总结',
      '教程/讲解类内容', '轻量 UI/空灵配乐封面'
    ],
    '深邃 · 神秘': [
      '科幻/悬疑氛围', '黑金/奢侈品视觉', '城市夜景/霓虹街拍',
      '硬朗电竞/游戏预告', '暗夜主题 UI'
    ]
  };

  function recommendByTone(tag, h, s, l){
    // 基于色调微调场景排序，使“非常精确”
    let list = (SCENE_LIBRARY[tag]||[]).slice();
    // 深色优先夜景/高对比；浅色优先轻快/留白
    if(l<28){
      list = list.filter(x=>/夜|暗|黑金|悬疑|电竞|动作|工业|预告/.test(x)).concat(
        list.filter(x=>!/夜|暗|黑金|悬疑|电竞|动作|工业|预告/.test(x))
      );
    }else if(l>80){
      list = list.filter(x=>/轻|清新|留白|教程|春|小清新|晨间/.test(x)).concat(
        list.filter(x=>!/轻|清新|留白|教程|春|小清新|晨间/.test(x))
      );
    }
    // 粉彩更偏治愈/甜美
    if(s<40 && l>78){
      const prefer = list.filter(x=>/冥想|睡眠|瑜伽|花|甜|婚|疗愈|vlog|康养/.test(x));
      const other  = list.filter(x=>!prefer.includes(x));
      list = prefer.concat(other);
    }
    // 霓虹高能更偏电竞/赛事/快剪
    if(s>85 && l>60){
      const prefer = list.filter(x=>/电竞|预告|快剪|动作|夜|霓虹|赛道|工业/.test(x));
      const other  = list.filter(x=>!prefer.includes(x));
      list = prefer.concat(other);
    }
    // 棕色更偏美食/手作/生活方式
    const isBrown = (h>=20 && h<=55) && (l<=55) && (s<=65);
    if(isBrown){
      const prefer = list.filter(x=>/美食|咖啡|市集|生活|手作|烘焙/.test(x));
      list = prefer.concat(list.filter(x=>!prefer.includes(x)));
    }
    return list.slice(0,5);
  }

  function describe(hex){
    const {h,s,l} = hexToHsl(hex);
    const tag = moodTag(h,s,l);
    const tone = tonePrefix(s,l);
    const name = cnColorName(h,s,l);
    const scenes = recommendByTone(tag, h, s, l);
    return { hex, h: Math.round(h), s: Math.round(s), l: Math.round(l), tone, tag, name, scenes };
  }

  function render(box, data){
    if(!box) return;
    const sw = `<span class="scene-sw" style="--swatch:${data.hex}"></span>`;
    const content = `${sw}<strong class="scene-tag">${data.tag}</strong> ${data.name}：推荐 ${data.scenes.join('、')}`;
    const target = box.querySelector('.scene-content');
    if(target) target.innerHTML = content;
    box.style.setProperty('--accent', hexToRgba(data.hex, 0.12));
    box.title = `H:${data.h}° S:${data.s}% L:${data.l}% — ${data.tone}`;
  }

  // ---------- 挂载 & 监听 ----------
  const box = $('#scene-reco');
  function update(){
    const hex = getHex();
    if(isHex6(hex)) render(box, describe(hex));
  }
  // 输入监听（比轮询更及时）
  const hexInput = $('#cb-hex-input');
  if(hexInput){
    hexInput.addEventListener('input', update);
    hexInput.addEventListener('change', update);
  }
  // 色块点击或 eyedropper 操作可能不触发 input；用轻量轮询兜底
  let last='';
  setInterval(()=>{
    const cur = getHex();
    if(cur!==last){ last=cur; update(); }
  }, 120);
  // 初始一次
  update();
})();
